<template>
  <div class="blog-basic tabs-part">
    <div class="part-one flex-between">
      <div v-for="(item, index) in partOneList" :key="index" class="card-item card">
        <p class="card-name">{{ item.name }}</p>
        <div class="card-item-data flex-between flex-align-items-center">
          <div>
            <p class="cart-item-num font-20-B">{{ item.value }}</p>
            <p v-if="index === 3" class="font-14 flex flex-align-items-center" style="color:#ff9401">
              月均发布{{ detail.monthRelease }}条<span></span>最近发布{{ timeDiff(detail.releaseTime) }}天前
            </p>
            <p v-else-if="item.monthContrast" class="font-16-B"
              :style="{ color: item.monthContrastType === 'add' ? '#2eca84' : '#ff9401' }">{{ item.monthContrastType ===
                'add' ? '+' : '-' }}{{ item.monthContrast }}</p>
          </div>
          <img v-if="item.img" :src="item.img">
        </div>
        <p class="card-desc">{{ item.desc }}</p>
      </div>
    </div>

    <div class="part-two flex-between">
      <div class="score-star card">
        <p class="card-name">凡兔评分</p>
        <div class="star-main flex-between flex-align-items-center">
          <div class="star-main-left">
            <p class="score">
              <span class="font-34-B">{{ detail.score }}</span>
              <span class="font-14">/5分</span>
            </p>
            <el-rate :model-value="detail.score" size="large" disabled :colors="['#ff5277', '#ff5277', '#ff5277']" />
          </div>
          <div class="star-main-right">
            <div class="score-level font-14">5%</div>
          </div>
        </div>
        <p class="card-desc"> 根据六个关键指标数据计算得出：该红人总评分为{{ detail.score }}分，在全平台红人中排名前{{ detail.ranking }} </p>
      </div>
      <div class="score-category card">
        <p class="card-name">凡兔评分指标</p>
        <div class="category-main flex-between flex-align-items-center">
          <div id="score-category-echart"></div>
          <div class="score-category-right">
            <div v-for="(item, index) in scoreIndicators" :key="index" class="category-item flex flex-align-items-center">
              <p class="name flex flex-align-items-center">
                <span class="font-14">{{ item.name }}</span>
                <el-tooltip :content="item.desc" placement="bottom" effect="light">
                  <i class="iconfont icon-chakantiezigengduojubao pointer"></i>
                </el-tooltip>
              </p>
              <p class="level flex">
                <i v-for="i in 5" :key="i"
                  :style="{ 'background-position-x': (item.value + 1 - i) > 1 ? 0 : (item.value + 1 - i) > 0 ? `${(item.value + 1 - i) * 10 - 10}px` : '-10px' }"></i>
              </p>
              <p class="desc font-14" :style="{ color: item.value > 4 ? '#ff5277' : '#ffac04' }">{{ item.value > 4 ? '优秀'
                : '良好' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="part-three flex-between">
      <div class="basic-kind card">
        <p class="card-name">擅长类目</p>
        <div class="kind-main">
          <p class="kind-info flex flex-align-items-center font-14">红人推荐品类分布</p>
          <div id="basic-kind-echart"></div>
        </div>
        <p class="card-desc">带货分类图通过分析红人的商业化视频及带货产品数据生成，可以更好的了解红人带货能力和带货特点</p>
      </div>
      <div class="basic-rank card">
        <p class="card-name">竞争力排名</p>
        <div class="rank-main">
          <div v-for="(item, index) in competitivenessRanking" :key="index" class="rank-box flex flex-align-items-center">
            <div class="rank-box-left">
              <div class="rank-box-overlay"
                :style="{ left: item.value > 50 ? 'auto' : 0, right: item.value > 50 ? 0 : 'auto', width: item.value > 50 ? (100 - item.value) + '%' : item.value + '%' }">
              </div>
              <img src="@/assets/competitiveness-ranking.png">
            </div>
            <div class="rank-box-right">
              <p class="font-20-B">{{ item.value > 50 ? `后 ${100 - item.value}%` : `前 ${item.value}%` }}</p>
              <p class="font-14">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <p class="card-desc">竞争力排名通过对红人进行聚类分析，并在同类红人中根据各项指标进行排名生成</p>
      </div>
    </div>

    <div class="part-four card">
      <p class="card-name">内容趋势</p>
      <div class="top-btns flex">
        <p v-for="(item, index) in partFourTypeList" :key="index" class="font-12 pointer"
          :class="{ active: partFourForm.type === item.value }" @click="partFourTypeChange(item.value)">{{ item.name }}
        </p>
      </div>
      <div class="view-toggle flex flex-align-items-center">
        <i class="iconfont icon-tubiao pointer" :class="{ active: partFourForm.format === 'echart' }"
          @click="partFourFormatChange('echart')"></i>
        <span></span>
        <i class="iconfont icon-caidan1 pointer" :class="{ active: partFourForm.format === 'table' }"
          @click="partFourFormatChange('table')"></i>
      </div>
      <div v-show="partFourForm.format === 'echart'" class="content-trend-list flex">
        <div v-for="(item, index) in contentTrendList" :key="index" class="content-trend-item pointer"
          :class="{ active: item.type === contentTrendType }" @click="contentTrendTypeChange(item.type)">
          <p class="content-trend-item-name flex flex-align-items-center">
            <i class="iconfont" :class="item.icon"></i>
            <span class="font-14">{{ item.name }}</span>
          </p>
          <p class="content-trend-item-num font-20-B">{{ item.value }}</p>
        </div>
      </div>
      <div v-show="partFourForm.format === 'echart'" id="content-trend-echart"></div>
      <template v-if="partFourForm.format === 'table'">
        <el-table :data="partFourList" height="420" class="table" style="margin-top: 50px;">
          <el-table-column prop="time" label="日期" />
          <el-table-column prop="value" label="粉丝数" />
          <el-table-column prop="value" label="观看量" />
          <el-table-column prop="value" label="视频数" />
        </el-table>
        <div v-if="partFourForm.total > 0" class="pagination flex">
          <el-pagination background :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
            :total="partFourForm.total" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
import numConvert from '@/js/numConvert.js';
import timeDiff from '@/js/timeDiff.js';
import * as echarts from "echarts";

const props = defineProps(['detail']);

const partFourTypeList = [
  {
    name: '总数据',
    value: 'all'
  },
  {
    name: '增长数据',
    value: 'add'
  }
];

const partOneList = ref([
  {
    name: '粉丝量',
    value: numConvert(props.detail.fansNum, 2),
    img: require('../../../assets/rate-null.png'),
    desc: `该红人粉丝数量为${numConvert(props.detail.fansNum, 2)}`
  },
  {
    name: '平均观看量',
    value: numConvert(props.detail.avgPlayNum, 2),
    monthContrast: props.detail.averageViewsMonthContrast,
    monthContrastType: props.detail.averageViewsMonthContrastType,
    img: require(props.detail.averageViewsMonthContrastType === 'add' ? '../../../assets/rate-up.png' : '../../../assets/rate-down.png'),
    desc: ` 近60天平均观看量 ${numConvert(props.detail.avgPlayNum, 2)}，较上个月减少 ${props.detail.averageViewsMonthContrast}，观看量中位数 ${numConvert(props.detail.avgPlayNum, 2)}`
  },
  {
    name: '平均互动率',
    value: props.detail.avgInteractRate,
    monthContrast: props.detail.averageInteractionRateMonthContrast,
    monthContrastType: props.detail.averageInteractionRateMonthContrastType,
    img: require(props.detail.averageInteractionRateMonthContrastType === 'add' ? '../../../assets/rate-up.png' : '../../../assets/rate-down.png'),
    desc: ` 近30天平均互动率 ${props.detail.avgInteractRate}，较上个月增加 ${props.detail.averageInteractionRateMonthContrast} `
  },
  {
    name: '活跃度',
    value: props.detail.activation,
    desc: `月均发布内容数${props.detail.monthRelease}条，最近发布时间 ${timeDiff(props.detail.releaseTime)}天前`
  }
]);
const scoreIndicators = ref([
  {
    name: '健康指数',
    value: 3.7,
    desc: '视频对粉丝的覆盖率，体现频道的整体影响力'
  },
  {
    name: '活跃指数',
    value: 4.2,
    desc: '红人内容发布的情况，体现频道的活跃度'
  },
  {
    name: '成长指数',
    value: 3,
    desc: '红人粉丝增长趋势，体现红人粉丝增长速度和潜力'
  },
  {
    name: '商业指数',
    value: 5,
    desc: '通过分析红人以往商业合作行为，展现其商业表现及价值'
  },
  {
    name: '亲密指数',
    value: 3.9,
    desc: '粉丝互动率，体现红人与粉丝之间的互动程度和亲密度'
  },
  {
    name: '意向指数',
    value: 3,
    desc: '红人商业合作意向度，体现红人的合作态度'
  }
]);
const recommendCates = ref([
  {
    name: '数码电器',
    value: 2100
  },
  {
    name: '办公设备',
    value: 232
  },
  {
    name: '游戏',
    value: 8
  },
  {
    name: '时尚服饰',
    value: 1
  },
  {
    name: '家居园艺',
    value: 1
  },
  {
    name: '汽摩配件',
    value: 1
  }
]);
const competitivenessRanking = ref([
  {
    name: '同类网红中的活跃度排名',
    value: 17
  },
  {
    name: '同类网红中的频道质量排名',
    value: 26
  },
  {
    name: '同类网红中的粉丝增长率排名',
    value: 60
  },
  {
    name: '同类网红中与粉丝的互动率排名',
    value: 23
  }
]);
const partFourForm = ref({
  type: 'all',
  format: 'echart',
  total: 100
});
const contentTrendType = ref('fansNum');
const contentTrendList = ref([
  {
    name: '粉丝数',
    type: 'fansNum',
    icon: 'icon-fensix',
    value: props.detail.fansNum
  },
  {
    name: '观看量',
    type: 'avgPlayNum',
    icon: 'icon-guankanliang',
    value: props.detail.playNum
  },
  {
    name: '视频数',
    type: 'video',
    icon: 'icon-shipinshuliang',
    value: props.detail.videoNum
  }
]);
const partFourList = ref([
  {
    time: '2023-07-01',
    value: 1000000
  },
  {
    time: '2023-08-01',
    value: 1200000
  },
  {
    time: '2023-09-01',
    value: 1300000
  },
  {
    time: '2023-10-01',
    value: 1400000
  },
  {
    time: '2023-11-01',
    value: 1500000
  }
]);

// 凡兔评分echart
const scoreCategoryEchart = () => {
  const domMap = document.getElementById("score-category-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  const option = {
    color: ['#ff5277'],
    tooltip: {
      trigger: 'item'
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '健康指数', max: 5 },
        { name: '活跃指数', max: 5 },
        { name: '成长指数', max: 5 },
        { name: '商业指数', max: 5 },
        { name: '亲密指数', max: 5 },
        { name: '意向指数', max: 5 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [3.7, 4.2, 3, 4, 3.9, 3],
            name: '评分指标',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(255,82,119, 0.2)',
                  offset: 0
                },
                {
                  color: 'rgba(255,82,119, 0.2)',
                  offset: 1
                }
              ])
            }
          }
        ]
      }
    ]
  };
  myEChart.setOption(option);
}
// 擅长类目echart
const basicKindEchart = () => {
  const domMap = document.getElementById("basic-kind-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/>带货数量 : {c}'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        center: ['50%', '70%'],
        startAngle: 180,
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.name;
          }
        },
        data: [
          ...recommendCates.value,
          {
            // make an record to fill the bottom 50%
            value: 1048 + 735 + 580 + 484 + 300,
            itemStyle: {
              // stop the chart from rendering this piece
              color: 'none',
              decal: {
                symbol: 'none'
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
    ]
  };
  myEChart.setOption(option);
}
// 切换总数据或增长数据
const partFourTypeChange = e => {
  if (partFourForm.value.type !== e) {
    partFourForm.value.type = e;
    contentTrendEchart();
  }
}
// 切换echart或table
const partFourFormatChange = e => {
  if (partFourForm.value.format !== e) {
    partFourForm.value.format = e;
    contentTrendEchart();
  }
}
const contentTrendTypeChange = e => {
  if (contentTrendType.value !== e) {
    contentTrendType.value = e;
    contentTrendEchart();
  }
}
// 内容趋势echart
const contentTrendEchart = () => {
  const domMap = document.getElementById("content-trend-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  let field = '', xAxisData = [], seriesData = [], seriesName = "";
  if (contentTrendType.value === 'fansNum') {
    field = 'value';
    seriesName = '粉丝数';
  } else if (contentTrendType.value === 'avgPlayNum') {
    field = 'value';
    seriesName = '观看量';
  } else if (contentTrendType.value === 'video') {
    field = 'value';
    seriesName = '视频数';
  }
  partFourList.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item[field]);
  });
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/>{a} : {c}'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      }
    },
    series: [
      {
        name: seriesName,
        data: seriesData,
        type: 'line',
        smooth: true
      }
    ]
  };
  myEChart.setOption(option);
}

onMounted(() => {
  scoreCategoryEchart();
  basicKindEchart();
  contentTrendEchart();
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  margin-bottom: 24px;

  .card-name {
    display: flex;
    align-items: center;
    font-size: 16;
    color: #333;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: @main-color;
      margin-right: 8px;
    }
  }

  .card-desc {
    border-top: 2px solid #ededed;
    color: #999;
    padding-top: 14px;
    font-size: 14px;
  }
}

.part-one {
  .card-item {
    width: 303px;
    height: 284px;

    .card-item-data {
      margin: 20px 0 8px;
      height: 130px;

      div {
        .cart-item-num {
          color: #333;
          margin-bottom: 24px;
        }

        p {
          span {
            width: 2px;
            height: 16px;
            background: #ededed;
            margin: 0 10px;
          }
        }
      }

      img {
        width: 100px;
        height: 130px;
      }
    }
  }
}

.part-two {
  &>div {
    height: 400px;
  }

  .score-star {
    width: 360px;

    .star-main {
      margin: 32px 0 20px;

      .score {
        padding-left: 8px;
        margin-bottom: 15px;

        span {
          color: #333;
        }
      }

      .star-main-right {
        margin-right: 28px;
        width: 20px;
        height: 222px;
        position: relative;
        background: linear-gradient(180deg, rgba(255, 138, 175, 0), rgba(255, 82, 119, .1) 52%, rgba(255, 133, 170, 0));



        .score-level {
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
          color: @main-color;

          &::after {
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 82, 119, 0), #f85277 50%, rgba(255, 82, 119, 0));
          }
        }
      }
    }
  }

  .score-category {
    width: 884px;

    .category-main {
      padding: 0 60px;

      #score-category-echart {
        width: 342px;
        height: 342px;
        margin-right: 100px;
      }

      .score-category-right {
        .category-item {
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .name {
            margin-right: 40px;

            span {
              color: #1d2129;
              margin-right: 8px;
            }

            i {
              color: #a9a9a9;
            }
          }

          .level {
            margin-right: 24px;

            i {
              width: 10px;
              height: 10px;
              background: #e2e2e2;
              border-radius: 50%;
              margin-right: 8px;
              background-image: url(@/assets/icon-red.png);
              background-size: auto;
              background-repeat: no-repeat;
              background-position-x: -10px;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}

.part-three {
  .basic-kind {
    width: 704px;
    height: 540px;

    .kind-info {
      margin-top: 30px;
      padding-left: 15px;
      color: #333;

      &::before {
        content: "";
        width: 16px;
        height: 16px;
        background: @main-color;
        border-radius: 4px;
        margin-right: 8px;
      }
    }

    #basic-kind-echart {
      width: 100%;
      height: 360px;
    }
  }

  .basic-rank {
    width: 540px;

    .rank-main {
      margin: 80px 0 40px;

      .rank-box {
        margin-bottom: 26px;

        &:last-child {
          margin-bottom: 0;
        }

        .rank-box-left {
          width: 140px;
          height: 40px;
          background: #f2f2f2;
          position: relative;

          .rank-box-overlay {
            height: 100%;
            width: 10%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            background: #ff5277;
          }

          img {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
          }
        }

        .rank-box-right {
          margin-left: 50px;

          p {
            &:first-child {
              color: #333;
              margin-bottom: 6px;
            }

            &:last-child {
              color: #999;
            }
          }
        }
      }
    }
  }
}

.part-four {
  position: relative;

  .top-btns {
    position: absolute;
    top: 24px;
    right: 156px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    padding: 6px 8px;

    p {
      height: 32px;
      padding: 0 16px;
      border-radius: 8px;
      color: #666;
      line-height: 30px;
      border: 1px solid transparent;

      &.active {
        background: #ffedf1;
        border: 1px solid rgba(255, 82, 119, .5);
        color: #f85277;
      }
    }
  }

  .view-toggle {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 100px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    i {
      flex: 1;
      font-size: 20px;
      color: #999;
      height: 44px;
      line-height: 44px;
      text-align: center;

      &.active {
        color: @main-color;
      }
    }

    span {
      width: 1px;
      height: 24px;
      background: #ededed;
      border-radius: 1px;
    }
  }

  .content-trend-list {
    margin-top: 40px;

    .content-trend-item {
      width: 260px;
      height: 90px;
      border-radius: 14px;
      margin-right: 16px;
      padding: 16px 24px;
      border: 1px solid #f2f2f2;

      &.active {
        &:nth-child(1) {
          background: rgba(85, 92, 253, .06);
          border-color: #555cfd;
        }

        &:nth-child(2) {
          background: rgba(253, 189, 54, .1);
          border-color: #fdbd36;
        }

        &:nth-child(3) {
          background: rgba(255, 82, 119, .06);
          border-color: @main-color;
        }
      }

      &:hover {
        &:nth-child(1) {
          background: rgba(85, 92, 253, .06);
        }

        &:nth-child(2) {
          background: rgba(253, 189, 54, .1);
        }

        &:nth-child(3) {
          background: rgba(255, 82, 119, .06);
        }
      }

      &:nth-child(1) {
        i {
          color: #555cfd;
        }
      }

      &:nth-child(2) {
        i {
          color: #fdbd36;
        }
      }

      &:nth-child(3) {
        i {
          color: @main-color;
        }
      }

      .content-trend-item-name {
        margin-bottom: 6px;

        i {
          font-size: 26px;
          margin-right: 8px;
        }

        span {
          color: #666;
        }
      }

      .content-trend-item-num {
        color: #333;
        padding-left: 32px;
      }
    }
  }

  #content-trend-echart {
    width: 100%;
    height: 420px;
  }

  .pagination {
    margin-top: 16px;
  }
}
</style>
